<script setup>
import _ from 'lodash'
import { $pageUtils } from "@jzl/utils";
import defDemo from './def.js'
import * as defs from "@jdc/crafto/defs.js";
import {nextTick, ref} from "vue";

const showComp = ref(false)
const selectedComp = ref(null)

const handleShowComp = async (iDef) => {
  showComp.value = false;

  let def = _.cloneDeep(iDef);
  let itemDef = def;
  def.ele_style._type = def.name;
  itemDef.ele_style = {
    [ def.name ]: def.ele_style,
    _sort:  [ def.name ]
  }

  console.log(selectedComp.value)

  setTimeout(() => {
    selectedComp.value = $pageUtils.getItemByDef(itemDef);
    showComp.value = true;
  }, 500)
  // await nextTick(() => {
  //
  // });
}

</script>

<template>
  <h1>Micro Test</h1>

<!--  <DynModule :def="item" />-->

  <div id="nav">
    <el-button
      href="javascript:void(0);"
      v-for="c in defs"
      :key="c.name"
      @click="handleShowComp(c)"
    >{{c.name}}</el-button>
  </div>
  <div
    class="jdccrafto-theme"
    v-if="showComp"
  >
    <DynModule :def="selectedComp" />
  </div>
</template>
<style lang="scss">

</style>
